@charset "utf-8";

/* variables */
/* == list filter == */
/* 每一项的高度 */
$list-filter-item-height: 30px !default;
$list-filter-base-color: #999 !default;
$list-filter-base-bg-color: transparent !default;
/* 选中列表项颜色 */
$list-filter-active-color: #1f86ed !default;
$list-filter-active-bg-color: rgba(31, 134, 237, 0.3) !default;
/* functions */

/**
 * [生成指定宽度的浮动块]
 * @param  {[integer/percentage]} $width [块的宽度]
 * @date   [2016-01-15]
 * @author [顾文洁]
 */

@mixin float-content($width,$align) {
    width: $width;
    float: left;
    padding: 5px 8px;
    box-sizing: border-box;
    text-align: $align;
}

@mixin a-content {
    cursor: default;
    display: inline-block;
    overflow: hidden;
    text-decoration: none;
}

/**
 * ======================================
 * @component [list filter]
 * @date      [2016-01-15]
 * @author    [顾文洁]
 * ======================================
 */

.dropdown {
    position: relative;
}

.dropdown-list {
    z-index: 3;
    text-align: left;
    display: none;
    list-style: none;
    position: absolute;
    top: $list-filter-item-height;
    padding-left: 0;
    max-height: 180px;
    overflow: auto;
    border: 1px solid #e5e5e5;
    margin: 0;
    border-radius: 2px;
    width: 100%;
    color: $list-filter-base-color;
    border-top:none;
    background-color: white;
    &-item {
        display: inline-block;
        width: 90%;
        padding: 0 5%;
        overflow: hidden;
        height: 1.5rem;
        cursor: pointer;
        &.active {
            color: $list-filter-active-color;
        }
    }
    &.open {
        display: block;
    }
}

.list {
    &-filter {
        //width: 200px;//筛选器宽度
        font-size: 12px;
        padding-bottom: 5px;
        a {
            @include a-content;
            color: $list-filter-base-color;
            height: inherit;
            text-decoration: none;
        }
        .list {
            &-title {
                //@include float-content(50%,center);//筛选项标题宽度
                //text-indent: .4rem;//标题缩进
                margin: 0;
                height: $list-filter-item-height;
                &-text {
                    color: $list-filter-active-color !important;
                }
            }
            &-item {
                //@include float-content(50%,center);//筛选项宽度
                height: $list-filter-item-height;
                margin: 0;
                &-text {
                    //height: 2.2rem !important;
                    //padding: .2rem 6px;
                    color: $list-filter-base-color;
                    border: 1px solid $list-filter-base-bg-color;
                    border-radius: 2px;
                }
                &.active {
                    .list-item-text {
                        border-color: #e5e5e5;
                        background-color: white;
                        color: #1f86ed;
                    }
                }
            }
            &-icon {
                display: inline-block;
                min-width: 30px;
            }
        }
    }
}
